import { Avatar, Button } from "@nextui-org/react";

export default function AvatarBox({user,openVip=()=>{}}){
    
    return (
        <div className="avatar-box flex justify-center flex-col items-center">
            <div className="avatar-message flex flex-col items-center mt-1">
                <Avatar src={user.avatar} isBordered></Avatar>
                <div className="nickname mt-2">
                    昵称：{user.nickname || "未知灵境用户"}
                </div>
                <div className="id mt-1">
                    ID: {user.id || 0}
                </div>
                {
                    user.vip?
                    <div className="vip mt-1">
                        VIP: {user.vip}
                    </div>:<></>
                }
            </div>
            <div className="balance mb-2">
                钱包余额： {user.balance || 0.00}
            </div>
            <div className="messages grid grid-cols-2">
                <div className="message-items mb-2">
                    ITK4 聊天: {user.ITK4 || 0} 次
                </div>
                <div className="message-items mb-2">
                   激活应用数: {user.appNum || 0} 次
                </div>
                <div className="message-items mb-2">
                    绘画次数: {user.drawFrequery || 0} 次
                </div>
                <div className="message-items mb-2">
                    知识库数量: {user.knowledgeBaseNum || 0}
                </div>
                <div className="message-items mb-2">
                    数据容量: {user.dataCapacity || 0} M
                </div>
                <div className="message-items mb-2">
                    模型数量: {user.ITK4 || 0}
                </div>
            </div>
            <div className="open_vip">
                {/* <button className="btn btn-primary" onClick={() => {setShow(true)}}>开通VIP</button> */}
                <Button color="primary" onClick={openVip} radius="full" className="py-1 px-2 text-[14px] h-auto w-auto mt-2.5 mb-3.5">开通VIP</Button>
            </div>
        </div>
    )
}